<!-- 订单信息-基础信息 -->
<script lang="ts" setup>
	import { ref } from 'vue';
	import { useOrder } from '@/store/order'
	import type { UploadMethod, UploadFile } from 'wot-design-uni/components/wd-upload/types'
	import { useUpload } from '@/utils/uploadFile'
	// import { getSnowboardList } from '@/api/snowboard'
	
	const orderStore = useOrder()

	const showPopup = ref(false)
	const select = ref<string>('')
	// const action = import.meta.env.VITE_UPLOAD_BASEURL

	const imgArr = orderStore.orderInfo.eq_photo.length > 0 ? orderStore.orderInfo.eq_photo.split(',').map(item => {
		return {
			url: item
		}
	}) : []
	const fileList = ref(imgArr)
	// const snowboardArr = ref<Record<string, any>>([])
	
	// onMounted(() => {
	// 	initData()
	// })

	// function initData() {
	// 	getSnowboardList().then(res => {
	// 		snowboardArr.value = [
	// 			...res.my_eq,
	// 			...res.my_ueq
	// 		]
	// 	})
	// }

	// 选择雪具回调事件
	function handleConfirm({ value, selectedItems }) {
		orderStore.setOrderInfo({
			eq_id: selectedItems.value,
			eq_name: selectedItems.label
		})
	}
	// 图片上传变更回调
	function handleUploadChange(event) {
		fileList.value = event.fileList
		console.log('event', event)
		const imgUrl = []
		const url_prefix = import.meta.env.VITE_IMG_URL_PREFIX
		fileList.value.forEach((item: any) => {
			// 已上传的
			if (item?.response.length < 1) {
				imgUrl.push(item?.url)
			} else{
				const res = JSON.parse(item.response)
				if (res.code == 0) {
					uni.showToast({
						icon: 'error',
						title: '上传图片失败'
					})
					fileList.value = []
				} else imgUrl.push(url_prefix + res.data.file.url)
			}
		})
		
		orderStore.setOrderInfo({
			eq_photo: imgUrl.join(',')
		})
		
		console.log(orderStore.orderInfo)
	}
	// 自定义上传接口
	const customUpload: UploadMethod = (file, formData, options) => {
		// const newFormData = new FormData();
		// // @ts-ignore
		// newFormData.append('image', file.url);
		const uploadTask = uni.uploadFile({
			url: import.meta.env.VITE_UPLOAD_BASEURL,
			header: options.header,
			name: options.name,
			fileName: options.name,
			fileType: options.fileType,
			formData,
			filePath: file.url,
			success(res) {
				if (res.statusCode === options.statusCode) {
					// 设置上传成功
					options.onSuccess(res, file, formData)
				} else {
					// 设置上传失败
					options.onError({ ...res, errMsg: res.errMsg || '' }, file, formData)
				}
			},
			fail(err) {
				// 设置上传失败
				options.onError(err, file, formData)
			}
		})
		// 设置当前文件加载的百分比
		uploadTask.onProgressUpdate((res) => {
			options.onProgress(res, file)
		})
	}
	// 跳转雪具列表页
	function handleSnowboard() {
		uni.navigateTo({
			url: '/pages-sub/snowboard/index?select=1'
		})
	}
</script>

<template>
	<wd-collapse-item title="基础信息" name="item1" custom-class="collapse-item">
		<!-- 雪具选择 -->
		<!-- <wd-select-picker
			v-model="select"
			type="radio"
			:show-confirm="false"
			use-default-slot
			checked-color="#FF844C"
			value-key='id'
			label-key='name'
			:columns="snowboardArr"
			@confirm="handleConfirm"
		>
			<view class="picker-input" @click="showPopup = true">
				<view :class="[{ select: orderStore.orderInfo.eq_id }]">{{ orderStore.orderInfo.eq_id ? orderStore.orderInfo.eq_name : '点击选择雪具'}}</view>
				<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
			</view>
		</wd-select-picker> -->
		<view class="picker-input" @click="handleSnowboard">
			<view :class="[{ select: orderStore.orderInfo.eq_id }]">{{ orderStore.orderInfo.eq_id ? orderStore.orderInfo.eq_name : '点击选择雪具'}}</view>
			<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
		</view>
		<!-- 上传雪具图片 -->
		<view class="module-title">上传雪具照片</view>
		<wd-upload
			custom-class='upload-box'
			:file-list="fileList"
			multiple
			reupload
			image-mode="aspectFill"
			:limit="9"
			@change="handleUploadChange"
			:upload-method="customUpload"
		>
			<view class="upload-block">
				<wd-icon name="add1" color="#616467" size="60px"></wd-icon>
			</view>
		</wd-upload>
	</wd-collapse-item>
</template>

<style lang="scss" scoped>
	.collapse-item {
		color: #23282C;
	}
	
	
	
	.module-title {
		padding-top: 16px;
		font-size: 16px;
		font-weight: 500;
		line-height: 20px;
	}
</style>